<template>
  <div class="scalable-pages">
    <main class="main" ref="mainElement">
      <div class="container">
        <div class="article-detail">
          <h2 class="article-title">{{ newsInfo.title }}</h2>
          <div class="article-content" v-html="newsInfo.content"></div>
        </div>

        <div class="footer">
          <div class="left">
            <router-link class="prev" :to="`/news/detail?id=${newsInfo.prev_news?.id}`" v-if="newsInfo.prev_news">
              上一条&nbsp;: &nbsp;{{ newsInfo.prev_news.title }}
            </router-link>
            <a v-else class="gray">上一条&nbsp;：&nbsp;没有了</a>
            <br/>
            <router-link class="prev" :to="`/news/detail?id=${newsInfo.next_news?.id}`" v-if="newsInfo.next_news">
              下一条&nbsp;: &nbsp;{{ newsInfo.next_news.title }}
            </router-link>
            <a v-else class="gray">下一条&nbsp;：&nbsp;没有了</a>
          </div>
          <div class="right">
            <router-link to="/news">返回目录</router-link>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { get } from "@/utils/request";
import { useRoute } from "vue-router";
import { watch } from "vue";

export default {
  data() {
    return {
      newsID: "0",
      newsInfo: {},
    };
  },
  setup() {
    const route = useRoute();
    return { route };
  },
  created() {
    this.getNewsId();
    watch(
      () => this.route.query.id,
      (newId) => {
        if (newId) {
          this.newsID = newId;
          this.fetchNewsData();
        }
      }
    );
  },
  methods: {
    getNewsId() {
      this.newsID = this.route.query.id || "0";
      this.fetchNewsData();
    },
    fetchNewsData() {
      get(`/news/detail?id=${this.newsID}`)
        .then((res) => {
          if (res?.code === 200) {
            this.newsInfo = res?.data;
            // 添加滚动到顶部的代码
             this.scrollToMain();
          }
        })
        .catch((err) => {
          console.error("获取新闻数据失败:", err);
        });
    },
    scrollToMain() {
      // 使用nextTick确保DOM已更新
      this.$nextTick(() => {
        const mainElement = this.$refs.mainElement;
        if (mainElement) {
          // 使用平滑滚动效果
          mainElement.scrollIntoView({
            behavior: "smooth",
            block: "start"
          });
          
          // 或者直接滚动（无动画）
          // mainElement.scrollIntoView();
        }
      });
    }
  },
};
</script>
<style lang="less" scoped>
.banners {
  width: 100%;
  display: black;
}

.swipers {
  width: 100%;
}

.main {
  background-color: #fff;
}

.container {
  margin: 0 auto;
  padding: 50px 0;
  width: 80%;
}

.article-detail {
  margin-bottom: 5vw;

  .article-title {
    text-align: center;
    font-size: min(42px, 2.3vw);
    margin-bottom: min(50px, 3vw);
    line-height: 1.5;
  }

  .article-content {
    font-size: min(28px, 1.5vw);
    margin-bottom: min(40px, 2vw);
    line-height: 1.6;
  }
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: min(22px, 1.3vw);
  margin-top: 120px;

  .left {
    display: flex;
    flex-direction: column;
    font-size: min(22px, 1.3vw);

    a {
      cursor: pointer;
      color: #111;

      &.gray {
        color: #999;
      }
      &.hover{
        color: #c5000a;
      }
    }
  }

  .right {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    line-height: 1;

    a {
      color: #111;
    }
  }
}
</style>